<!DOCTYPE html>
<html>
  <head>
    <title>timeline</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
	<meta name="viewport" content="width=divice-width,initial-scale=1">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
	
	<style type="text/css">
	#theImage{
		height:400px;
	}
	#show{
		padding-bottom: 0px;
		padding-top: 0px;
		padding-left: 0px;
		padding-right: 0px;
	}
	#field{
		margin-bottom: 0px;
		margin-top: 0px;
		margin-left: 0px;
		margin-right: 0px;
	}
    .ui-slider {
      	width : 90% !important;
      	height: 1px !important;
    }
    input.ui-slider-input {
      	display : none !important;
    }
    .ui-slider-handle {
    	width: 5px !important;
      	height: 5px !important;
    	background-color: red;
    }
   </style>
	
	<script>
	$(document).ready(function(){
		//$("#slider").hide({});
        $("#slider").change(function() {
        	value = $(this).val();
            src = "https://s3.amazonaws.com/pisofttech/images/" + value + ".jpg";
            $('#theImage').attr('src', src);
            $('#theImage').fadeIn();
            $("h6").html(value);
        });
    });
	</script>
	
  </head>
  
  <!-- onload="javascript:showtime();" -->
  <body>
    <!-- Home -->
<div id="page1" data-role="page" data-position="fullscreen">
   <div data-role="header" data-position="fullscreen" data-theme="b">
       <input id="slider" type="range" value="4" max="4" min="1">
       <h6 id="showtime"></h6>
    </div>
    
    <div id="show" data-role="content" data-theme="b">
        <div id="field" data-role="fieldcontain" data-position="fullscreen">
            <img id="theImage" alt="slider images" src="https://s3.amazonaws.com/pisofttech/images/1.jpg"/>
         </div>
    </div>
    
    <div data-role="footer" data-position="fixed" data-theme="b">
    	 <h1>
            Pi Software Technology Ltd.
        </h1>
    </div>
</div>
  </body>
</html>
